import { PageHeader, Breadcrumb, Button, Form, Input, DatePicker, Rate } from 'antd';

import { useNavigate, useSearchParams } from 'react-router-dom';
import React, { useState, useEffect } from 'react'
// 上传组件
import Upload from '../../components/upload'
import moment from 'moment'
import { addHospital, hospital,editHospital } from '../../api'

const { RangePicker } = DatePicker;
const { TextArea } = Input;
// 创建ref
const formRef = React.createRef();

export default (props) => {

    const navigate = useNavigate()

    // 获取query参数
    let [query] = useSearchParams()
    let id = query.get("id")

    let [title, setTitle] = useState("添加医院")

    // 医院数据
    const [hospitalData, setHospitalData] = useState(null)

    //医院特点
    const [desc, setDesc] = useState("")
    // 获取文本域的值
    const getDesc = (evt) => {
        setDesc(evt.currentTarget.value)
    }
    // 营业时间
    const [openTime, setOpenTime] = useState([moment(new Date("2022-10-05")), moment(new Date("2022-10-09"))])


    useEffect(() => {
        if (id) {
            setTitle("修改医院")
        }


        // 如果获取到id，并且没有医院详情数据，则请求接口，获取医院详情数据
        if (id && !hospitalData) {
            hospital({ id: id })
                .then(res => {
                    console.log(res)
                    setHospitalData(res.data)
                    const data = res.data;


                    // 把数据写回表单
                    formRef.current.setFieldsValue({
                        name: data.name,
                        address: data.address,
                        phone: data.phone,
                        level: data.level,
                        "open-time": [moment(new Date(data['open-time'][0])), moment(new Date(data['open-time'][1]))]
                    });
                    // 设置文本域的值
                    setDesc(data.desc)

                })
        }
    })


    const onFinish = (form) => {
        console.log(form)
        form.desc = desc;

        let start, end;
        if (form['open-time']) {
            // 把日期格式化成 yyyy-MM-dd格式
            let start = form['open-time'][0].format("YYYY-MM-DD")
            let end = form['open-time'][1].format("YYYY-MM-DD")
        } else {
            let start = openTime[0].format("YYYY-MM-DD")
            let end = openTime[1].format("YYYY-MM-DD")
        }

        form['open-time'] = []
        form['open-time'][0] = start;
        form['open-time'][1] = end;

        if (id) {
            // 修改医院
            form.id = id;
            editHospital(form)
            .then(res =>{
                if (res.data.code == 200) {
                    navigate("/")
                }
            })

        } else {
            // 添加医院
            addHospital(form)
                .then(res => {
                    if (res.data.code == 200) {
                        navigate("/")
                    }
                })
        }




    }

    return (
        <>
            {/* 页面头部 */}
            <PageHeader
                className="site-page-header"
                onBack={() => navigate(-1)}
                title={title}
                subTitle="This is a subtitle"
            >
                <Breadcrumb>
                    <Breadcrumb.Item>诊所管理</Breadcrumb.Item>
                    <Breadcrumb.Item>{title}</Breadcrumb.Item>
                </Breadcrumb>
            </PageHeader>


            {/* 添加表单 */}
            <div className='bg-white border-box pad-20'>
                <Form
                    ref={formRef}
                    labelCol={{ span: 2 }}
                    wrapperCol={{ span: 8 }}
                    onFinish={onFinish}

                >
                    <Form.Item label="诊所名称" name="name">
                        <Input className='width-300' />
                    </Form.Item>
                    <Form.Item label="诊所地址" name="address">
                        <Input />
                    </Form.Item>
                    <Form.Item label="诊所星级" name="level">
                        <Rate />
                    </Form.Item>
                    <Form.Item label="联系电话" name="phone">
                        <Input />
                    </Form.Item>
                    <Form.Item label="营业时间" name="open-time">
                        <RangePicker placeholder={['开始', '结束']} />
                    </Form.Item>
                    <Form.Item label="诊所特点">
                        <TextArea onChange={getDesc} value={desc} rows={4} placeholder="请输入诊所特点" maxLength={800} />
                        <p>还可以输入<span>800</span>字</p>
                    </Form.Item>
                    <Form.Item label="上传图片">
                        <Upload />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">提交</Button>
                    </Form.Item>
                </Form>
            </div>

        </>
    )
}